

<template>
  <div id="app">
    <h2>count === {{ count }}</h2>
    <div id="nav" class="nav">
      <!-- 6. 路由导航  -->
      <router-link to="/home">Home</router-link>丨
      <router-link :to="{ name: 'find' }">Find</router-link>
      <router-link :to="{ name: 'mine' }">Mine</router-link>
      <router-link :to="{ name: 'vuex' }">vuex</router-link>
    </div>
    <!-- 5.路由出口 -->
    <router-view class="boxview" />
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["count"]),
  },
};
</script>





<style lang="scss" scoped>
.nav {
  text-align: center;
  a {
    margin: 10px;
  }
  .router-link-exact-active,
  .router-link-active {
    color: darkred;
    border: 1px solid darkorange;
  }
}
.boxview {
  min-height: 300px;
  border: 1px solid darkmagenta;
  border-radius: 10px;
  width: 90%;
  margin-top: 20px;
  margin-left: 10px;
}
</style>

